<template>
    <el-dialog title="添加党费" :visible.sync="detailsVisible" width='1050px' append-to-body v-dialogDrag :close-on-click-modal="false" >
        <div>
            <el-row style="position: relative;width: 100%;">
                <el-table :data="recoderfilesTrue"  border  empty-text="点击右侧添加党费" >
                    <el-table-column type="index" width="80" label="序号"  :index="indexbf" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="year" width="100" label="年份"   :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="month" width="100" label="月份"   :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="truename" width="125" label="缴纳人" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="personid" width="125" label="身份证号" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="needJiao" width="125" label="应交数" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="trueJiao" width="125" label="实交数" :show-overflow-tooltip='true' sortable align="center"></el-table-column>
                    <el-table-column prop="time" width="125" label="缴纳时间" :show-overflow-tooltip='true' sortable align="center" ></el-table-column>
                    <el-table-column align="right">
                        <template slot="header" slot-scope="scope">
                            <el-button  size="mini"  @click="addpersondf" >新增</el-button>
                        </template>
                        <template slot-scope="scope">
                        <el-dropdown trigger="click" @command="fileCommand" v-if="showAdd==true">
                            <span class="el-dropdown-link">操作<i class="el-icon-caret-bottom el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item class="clearfix" :command="{data:scope.row,typed:'delete'}">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="SizeChangeB" @current-change="CurrentChangeB" :current-page.sync="currentPageB" :page-sizes="[10, 20, 50, 100]" :page-size="pageSizeB" layout="sizes,total, prev, pager, next" :total="totalB"></el-pagination>
            </el-row>
            
            <el-row style="position: relative;width: 100%;">
                <el-button style="margin: 0 auto;display: block;"  type="primary" @click="submit">确定并保存<i class="el-icon-upload el-icon--right" ></i></el-button>
            </el-row>
        </div>
        <dfeiaddedit ref='dfeiaddedit' v-on:editResult="addone"></dfeiaddedit>
    </el-dialog>
    
    
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data: () => ({
            detailsVisible:false,
            showAdd:true,//显示添加的按钮,  //只有党支部才可以显示添加
            //第二个表格
            recoderfiles:[], //获取到的文件
            recoderfilesTrue:[],//真正在表格里面显示的 由于分页等原因
            // 表格分页
            currentPageB:1,//当前页码
            pageSizeB:10, //当前表格中显示的数据的总个数
            totalB:0, //默认一页显示数量
        }),
        mounted() {
            if(this.GetUser()==false){
                this.$router.push("/");
            }
        },
        watch: {
            "recoderfiles":{
                handler(){
                    this.showdataB();
                },
                deep:true

            },
            detailsVisible: function (n) {
                if (n == true) {
                   this.recoderfiles=[];
                   this.showdataB();
                }
            },
        },
        components: {
            dfeiaddedit: function(resolve) {require(["./dfeiaddedit.vue"], resolve);},
        },
        methods: {
            ...mapActions(['GetUser','GetZbById','GetActiveDwId_DzbId']),
            addone(rowdata){
                if(Array.isArray(rowdata)){
                    for (let index = 0; index < rowdata.length; index++) {
                        const element = rowdata[index];
                        this.recoderfiles.push(element);
                        
                    }
                }
                else
                {
                    this.recoderfiles.push(rowdata);
                }
            },
            showdataB(){
                this.totalB=this.recoderfiles.length;
                if (this.recoderfiles.length >= 0)
                {
                    let offset = (this.currentPageB - 1) * this.pageSizeB;
                    this.recoderfilesTrue=this.recoderfiles.slice(offset, this.pageSizeB+offset);
                }
            },
            SizeChangeB(val){
                this.pageSizeB = val;
                this.showdataB();
            },
            CurrentChangeB(val){
                this.currentPageB = val;
                this.showdataB();
            },
            indexbf(index){
                let offset = (this.currentPageB - 1) * this.pageSizeB;
                return index+offset+1;
            },
            fileCommand(value){
                let row=value.data;
                let typed=value.typed;
                let _this=this;
                if(typed=="delete"){
                    let indexA=-1;
                    for (let index = 0; index < this.recoderfiles.length; index++) {
                        const element = this.recoderfiles[index];
                        if(element.personid==row.personid){
                            indexA=index;
                        }
                    }
                    this.recoderfiles.splice(indexA,1);
                    this.showdataB();
                }
            },
            addpersondf()
            {
                this.$refs.dfeiaddedit.$data.dialogVisible = true;
            },
            submit()
            {
                let neddPosts=[];
                for (let index = 0; index < this.recoderfiles.length; index++) {
                    const element = this.recoderfiles[index];
                    neddPosts.push({
                        personid:element.personid,
                        dwid:1,
                        dzbid:2,
                        year:element.year,
                        month:element.month,
                        needJiao:element.needJiao,
                        trueJiao:element.trueJiao,
                        time:element.time,

                    })
                };
                let lt=this.AddDfei(neddPosts);
                if(lt==true){
                    this.detailsVisible=false;
                    // this.$emit('editResult');
                }
                else{}
            },
            AddDfei(neddPosts)
            {
                let lt=true;
                for (let index = 0; index < neddPosts.length; index++) {
                    const element = neddPosts[index];
                    let re=this.Ajaxpost(element);
                    if(re.Status==true){

                    }
                    else{
                        lt=false
                    }
                };
                return lt;
            },
            Ajaxpost(data){
                let postdata={
                    type:"adddfei",
                    split:JSON.stringify(data)
                }
                return this.$Common.AjaxPostSync(postdata,true)
            },
        }
    }
</script>
<style>
</style>